<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">
  <head>
    <title>OpenLayers: Google Layer Example</title>
    <link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
    <!-- this gmaps key generated for http://localhost:8080/geoserver/ -->
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>
    <script src="OpenLayers.js"></script>
    <script type="text/javascript">
    
      var map;
      var vectorLayer;

      function init(){
    	  map = new OpenLayers.Map('map');
          // Create base layer
          baseLayer = new OpenLayers.Layer.OSM("Simple OSM Map");
          // Create other layers (from geoserver)
          var estados = new OpenLayers.Layer.WMS(
              "Estados", "http://localhost:8080/geoserver/sig/wms",
              {layers: 'sig:uf', transparent : true,
  				format : 'image/gif'
  			},
  			{
  				isBaseLayer : false,
  				displayOutsideMaxExtent : true,
  				yx : {'EPSG:900913':false}
  			}
  		  );

          // allow testing of specific renderers via "?renderer=Canvas", etc
          var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
          renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

          /*
           * Layer style
           */
          // we want opaque external graphics and non-opaque internal graphics
          var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
          layer_style.fillOpacity = 0.2;
          layer_style.graphicOpacity = 1;

          /*
           * Mark style
           */
          var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
          // each of the three lines below means the same, if only one of
          // them is active: the image will have a size of 24px, and the
          // aspect ratio will be kept
          // style_mark.pointRadius = 12;
          // style_mark.graphicHeight = 24; 
          // style_mark.graphicWidth = 24;

          // if graphicWidth and graphicHeight are both set, the aspect ratio
          // of the image will be ignored
          style_mark.graphicWidth = 24;
          style_mark.graphicHeight = 20;
          style_mark.graphicXOffset = 10; // default is -(style_mark.graphicWidth/2);
          style_mark.graphicYOffset = -style_mark.graphicHeight;
          style_mark.externalGraphic = "../img/marker.png";
          // title only works in Firefox and Internet Explorer
          style_mark.title = "this is a test tooltip";

          vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
              style: layer_style,
              renderers: renderer
          });

          map.addLayers([baseLayer, estados, vectorLayer]);
          map.setCenter(new OpenLayers.LonLat(-35.88, -7.23).transform(
  				new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 7);
      }
      
      function plotGeoms(geomList) {
    	  for (g in geomList)
    	  { 
    		  vectorLayer.addFeature(g);
    	  }
      }
    </script>
  </head>

  <body onload="init()">
    <h1 id="title">OpenLayers: Projeto SIG</h1>
    <div id="map" class="olmap" style="width: 100%; height: 550px"></div>
    
    <h:form>
		<h:outputLabel value="Consulta:" />
		<h:inputTextarea value="#{consultaBean.query}"/>
		<div align="right">
			<h:commandButton value="Executar"
				action="#{consultaBean.executeQuery()}" />
		</div>
	</h:form>
	
  </body>

</html>